<template>
  <el-card class="page-container" shadow="hover">
    <!-- 顶部信息区域 -->
    <div class="top-section">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-image 
            :src="rabbitHeadImg" 
            alt="产品图片" 
            class="product-main-img"
            fit="contain"
          >
            <template #placeholder>
              <div class="image-placeholder">点击上传主图</div>
            </template>
          </el-image>
        </el-col>
        
        <el-col :span="20">
          <el-descriptions column="1" border>
            <el-descriptions-item label="产品名称">兔头（麻辣味）</el-descriptions-item>
            <el-descriptions-item label="生产批次">{{ productionBatch }}</el-descriptions-item>
            <el-descriptions-item label="保质期">{{ shelfLife }} 天</el-descriptions-item>
            <el-descriptions-item label="生产许可证号">{{ productionLicense }}</el-descriptions-item>
            <el-descriptions-item label="生产企业">{{ productionEnterprise }}</el-descriptions-item>
            
            <el-descriptions-item label="产品检验报告">
              <el-upload
                action="/upload"
                list-type="picture-card"
                :file-list="reportFileList"
                :limit="3"
              >
                <el-icon><plus /></el-icon>
              </el-upload>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </div>

    <!-- 标签页内容区域 -->
    <el-tabs v-model="activeTab" class="mt-4" type="card">
      <el-tab-pane label="养殖信息" name="breeding">
        <el-form :model="breedingForm" label-width="120px" class="mt-2">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="养殖批次">
                <el-input v-model="breedingForm.batch" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="吨均重(kg)">
                <el-input v-model="breedingForm.averageWeight" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="养殖周期">
                <el-input v-model="breedingForm.period" readonly />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="养殖图片">
            <el-upload
              action="/upload"
              list-type="picture-card"
              :file-list="breedingImgList"
              :limit="5"
            >
              <el-icon><plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="屠宰信息" name="slaughter">
        <el-form :model="slaughterForm" label-width="120px" class="mt-2">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="屠宰时间">
                <el-date-picker
                  v-model="slaughterForm.time"
                  type="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  readonly
                  placeholder="选择时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检疫编号">
                <el-input v-model="slaughterForm.quarantineNo" readonly />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="深加工信息" name="processing">
        <el-form :model="processingForm" label-width="120px" class="mt-2">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="加工日期">
                <el-date-picker
                  v-model="processingForm.date"
                  type="date"
                  readonly
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="加工工艺">
                <el-select v-model="processingForm.technology" readonly placeholder="选择工艺">
                  <el-option label="麻辣腌制" value="spicy" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';

// 基础数据
const rabbitHeadImg = ref('https://picsum.photos/300/300');
const productionBatch = ref('20230518001');
const shelfLife = ref(90);
const productionLicense = ref('SC11251011400236');
const productionEnterprise = ref('成都美味食品加工厂');

// 检验报告上传
const reportFileList = ref([
  { name: '检验报告1.pdf', url: 'https://picsum.photos/100/100?random=1' }
]);

// 标签页控制
const activeTab = ref('breeding');

// 养殖信息表单
const breedingForm = ref({
  batch: 'YZ20230401',
  averageWeight: 2.8,
  period: '2023-04-01 至 2023-06-15'
});
const breedingImgList = ref([
  { name: '养殖环境1.jpg', url: 'https://picsum.photos/200/200?random=2' },
  { name: '养殖环境2.jpg', url: 'https://picsum.photos/200/200?random=3' }
]);

// 屠宰信息表单
const slaughterForm = ref({  
  time: new Date('2023-06-16 08:30:00'),
  quarantineNo: 'JY202306160089'
});

// 深加工信息表单
const processingForm = ref({
  date: new Date('2023-06-18'),
  technology: 'spicy'
});
</script>

<style scoped>
.page-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

.top-section {
  margin-bottom: 20px;
}

.product-main-img {
  width: 100%;
  height: 200px;
  border: 1px dashed #ddd;
  border-radius: 4px;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  background: #f5f5f5;
}

::v-deep .el-upload--picture-card {
  width: 100px;
  height: 100px;
}

::v-deep .el-descriptions__cell {
  padding: 12px 16px;
}
</style>